﻿@model List<ScrumTracker.Models.User>
@{
    Layout = "~/Views/Shared/_Layout4.cshtml";
    ViewBag.Title = "Users";
}
@section head{
    <script type="text/javascript">
        $(function () {
            var dispatcher = {};

            $(dispatcher).on('usersUpdated', function () {
                window.location.reload();
            });

            $('a.confirm').on('click', function (e) {
                e.preventDefault();
                if (confirm($(this).attr('title'))) {
                    var href = $(this).attr('href');
                    $.ajax({
                        url: href,
                        type: 'post',
                        data: {},
                        processData: false,
                        dataType: 'json',
                        success: function (data, status, request) {
                            $(dispatcher).trigger('usersUpdated');
                        }
                    });
                }
            });

            $('a.dialog').on('click', function (e) {
                e.preventDefault();
                var href = $(this).attr('href');
                var title = $(this).attr('title');
                var $dialog = $("<div></div>").attr('title', title).appendTo('body');
                $($dialog).load(href, function () {
                    $($dialog).dialog({
                        modal: true,
                        resizable: false,
                        buttons: {
                            "Save": function () {
                                $('form', $dialog).submit();
                            },
                            "Cancel": function () {
                                $(this).dialog("close");
                            }
                        },
                        close: function () {
                            $($dialog).remove();
                        }
                    });

                    $($dialog).on('submit', 'form', function (e) {
                        e.preventDefault();
                        var action = $(this).attr('action');
                        var formData = $(this).serialize();
                        $.ajax({
                            url: action,
                            type: 'post',
                            data: formData,
                            processData: false,
                            dataType: 'html',
                            success: function (data, status, request) {
                                $($dialog).dialog('close');
                                $(dispatcher).trigger('usersUpdated');
                            },
                            statusCode: {
                                400: function (data) {
                                    $($dialog).html(data.responseText);
                                }
                            }
                        });
                    });

                    $($dialog).on('keypress', 'form', function (e) {
                        if (e.which == 13) {
                            $(this).submit();
                        }
                    });
                });
            });
        });
    </script>
}
<div style="text-align: right;">@Html.ActionLink("New User", "new", null, new { @class = "button dialog", title = "New user" })</div>
<div style="margin-top: 5px;">
    @{
        var grid = new WebGrid(Model, canPage: false, canSort: false);
        @grid.GetHtml(
        tableStyle: "table-issues",
        headerStyle: "ui-widget-header",
        columns: grid.Columns(
            grid.Column("FirstName"),
            grid.Column("LastName"),
            grid.Column("Email"),
            grid.Column(format: @<text>@Html.ActionLink("edit", "edit", new { id = item.UserId }, new { @class = "dialog", title = "Edit user" }) | @Html.ActionLink("delete", "delete", new { id = item.UserId }, new { @class = "confirm", title = "Are you sure?" })</text>)
                     )
                 )
    }
</div>
